import './Map.scss'
import {useEffect, useState} from "react";
import {appStore} from "../../stores/modules/app";
import {MapType} from "../../resources/maps";

export function Map() {
  const [mapData, setMapData] = useState<MapType>()
  const [mapDataLayerKeyList, setMapDataLayerKeyList] = useState<string[]>([])
  useEffect(() => {
    const data = appStore.allMap?.get(appStore.currentMapKey)
    setMapData(data)
    setMapDataLayerKeyList(Object.keys(data?.data || {}))
  }, []);

  return <>
    {
      mapData ? <div className='map'
                     style={{
                       width: mapData.meta.width, height: mapData.meta.height,
                       backgroundSize: `${mapData.meta.size}px ${mapData.meta.size}px`
                     }}>
        {mapDataLayerKeyList.map(key =>
          mapData.data[key as 'floor']!.map((item, index) =>
            <img key={index} src={appStore.allSprite?.get(item.spriteName)} alt={item.spriteName}/>
          )
        )}
      </div> : <div>加载中</div>
    }
  </>
}